<template>
  <view class="template-course tn-safe-area-inset-bottom">
	  <view class="btmbgview">
    <!-- 顶部自定义导航 -->
	<!-- <tn-nav-bar :isBack="false" :alpha="true">
		  <view class="infovvv">
			<image class="tllttimg" src="../../static/icons/tlltt.png" mode=""></image>
			<view class="namevvv">
				{{childName?childName:''}}
			</view>
		  </view>
	</tn-nav-bar> -->
	<view class="infovvv">
				<!-- <view class="bigtext">
					天乐乐淘淘
				</view> -->
				<image class="tllttimg" src="../../static/icons/tlltt.png" mode=""></image>
				<view class="namevvv">
					{{childName?childName:''}}
				</view>
	</view>
    <!-- 页面内容 -->
    <view class="tn-margin">
      <tn-swiper :list="banner" :height="220" :effect3d="false" mode="dot" @click="clickBanner" imageMode="scaleToFill"></tn-swiper>
    </view>
	</view>
    <view class="itemsview-con">
    	<tn-grid align="left" :col="col">
    	  <block v-for="(item, index) in moduleList" :key="index">
    		<!-- H5 -->
    		<!-- #ifndef MP-WEIXIN -->
    		<tn-grid-item>
    		  <view class="tn-flex-1 tn-margin-xs tn-radius" @click="goMydetailpage(item.url)">
    		    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
    		      <view class="iconii__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-color-white">
    		        <!-- <view :class="item.icon"></view> -->
					<img :src="getImgsbase64(item.icon)" alt="" />
    		      </view>
    		      <view class="tn-color-black tn-text-center">
    		        <text class="tn-text-ellipsis">{{item.name}}</text>
    		      </view>
    		    </view>
    		  </view>
    		</tn-grid-item>
    		<!-- #endif-->
    		
    		<!-- 微信小程序 -->
    		<!-- #ifdef MP-WEIXIN -->
    		<tn-grid-item :style="{width: gridItemWidth}">
    		  <view class="tn-flex-1 tn-margin-xs tn-radius" @click="goMydetailpage(item.url)">
    		    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
    		      <view class="iconii__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-color-white" :class="item.iconClass">
    		        <img :src="getImgsbase64(item.icon)" alt="" />
    		      </view>
    		      <view class="tn-color-black tn-text-center">
    		        <text class="tn-text-ellipsis">{{item.name}}</text>
    		      </view>
    		    </view>
    		  </view>
    		</tn-grid-item>
    		<!-- #endif-->
    	 </block>
    	</tn-grid>
    </view>
	<view class="iii-item">
		<view class="itemcontent tn-flex tn-flex-direction-row">
			<view class="tn-flex tn-flex-row-center gonggaoimg">
				<img src="../../static/icons/zxzx.png" alt="" />
			</view>
			<view class="tn-flex tn-flex-1 tn-flex-row-center tn-text-sm">
				<!-- <tn-notice-bar :list="noticelist1" mode="vertical"  @click="noticeClick" @rightClick="noticeClick"></tn-notice-bar> -->
				欢迎使用天乐乐淘淘家校互动平台
			</view>
			<view class="tn-flex tn-flex-row-center gengduo" @click="noticeClick">
				更多
			</view>
		</view>
	</view>
	
	<view class="iii-item">
		<view class="itemcontent tn-flex tn-flex-direction-row">
			<view class="tn-flex tn-flex-row-center tn-color-black">
				{{childName}}
			</view>
			<view class="tn-flex tn-flex-1 tn-flex-row-center tn-color-black">
				{{ruyuanjilu.start?ruyuanjilu.start:'08:30:30'}}入园
			</view>
			<view class="tn-flex tn-flex-1 tn-flex-row-center tn-color-black">
				{{ruyuanjilu.end?ruyuanjilu.end:'16:30:00'}}离园
			</view>
			<view class="tn-flex tn-flex-row-center rightdouble"  @click="gopages">
				  <text class="tn-icon-right"></text>
			</view>
		</view>
	</view>
	<view class="iii2-item">
		<img :src="getImgsbase64('banner2')" alt="" />
	</view>
	
	<view class="iii-item">
	  	<view class="itemcontent tn-flex tn-flex-direction-row tn-margin-bottom-sm">
	  		<view class="tn-flex tn-flex-row-center tn-color-black frameview">
	  			<img src="../../static/icons/Frame.png" alt="" />
	  		</view>
	  		<view class="tn-flex tn-flex-1 tn-color-black tn-padding-left-sm tn-text-bold">
				班级栏目相册
	  		</view>
	  		<view class="tn-flex tn-flex-row-center rightdouble"  @click="goxiangce">
	  			  <text class="tn-icon-right"></text>
	  		</view>
	  	</view>
		<view class="">
			<view class="tn-flex tn-flex-direction-row tn-margin-bottom item-v" v-for="(item, index) in dataList" :key="index">
			   <view class="infos-v">
				   <view class="tn-flex tn-flex-direction-row">
						<view class="xcavatar tn-flex tn-flex-row-center avatarview">
							<!-- <tn-avatar size="lg" src="../../static/login_top3.png"></tn-avatar> -->
							<img src="../../static/login_top3.png" alt="" />
						</view>
						<view class="tn-flex tn-flex-1 tn-flex-direction-column tn-flex-row-between tn-padding-left-sm">
							<view class="tn-flex tn-flex-direction-row">
								<view class="tn-flex tn-flex-row-center tn-text-bold margin-right20">
									{{item.createUserName}}
								</view>
								<view class="tn-flex tn-flex-row-center baojiaotag">
									保教主任
								</view>
							</view>
							<view class="tn-color-gray tn-text-sm padding-bottom10">
								{{item.createdTime}}
							</view>
						</view>
				   </view>
					<view class="tn-margin-bottom-sm blogger__item">
						<block v-if="item.images">
						  <view v-if="[1,2,4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
						    <image v-for="(image_item,image_index) in item.images" :key="image_index" @click="showImage(item,image_item)"
						      class="blogger__main-image"
						      :class="{
						        'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
						        'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
						      }"
						      :src="image_item.src"
						      mode="aspectFill"
						    ></image>
						  </view>
						  <view v-else class="tn-padding-top-xs">
						    <tn-grid  hoverClass="none" :col="3">
						      <block v-for="(image_item,image_index) in item.images" :key="image_index">
						        <!-- #ifndef MP-WEIXIN -->
						        <tn-grid-item style="width: 30%;margin: 10rpx;">
						          <image
						            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
						            :src="image_item.src"
						            mode="aspectFill"
						          ></image>
						        </tn-grid-item>
						        <!-- #endif-->
						        <!-- #ifdef MP-WEIXIN -->
						        <tn-grid-item style="width: 30%;margin: 10rpx;">
						          <image
						            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
						            :src="image_item.src"
						            mode="aspectFill"
						          ></image>
						        </tn-grid-item>
						        <!-- #endif-->
						      </block>
						    </tn-grid>
						  </view>
						</block>
					</view>
			   </view>
			</view>
		</view>
	</view>
	
	<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
		<tn-swiper class="thswiper" :height="800" :list="imglist" :autoplay="false" imageMode="widthFix"></tn-swiper>
	</view>
	
	<tn-popup
	  v-if="isshowPOP"
	  v-model="showpopup"
	  length="50%"
	  mode="center"
	  backgroundColor="#ffffff"
	  width="80%"
	  height="50%"
	  :borderRadius="10"
	  @close="closedPopup"
	>
	  <view class="popup-content tn-padding">
		  <view class="pop-title tn-margin-bottom-sm tn-text-bold">
		  	{{currentMsg.title}}
		  </view>
		  <view class="pop-time tn-margin-bottom" style="font-size: 12px;">
			{{currentMsg.sendTime}}
		  </view>
		  <view class="tongzhi-pop-content" v-html="currentMsg.content">
		  </view>
	    <tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="220rpx" backgroundColor="#01BEFF" fontColor="#ffffff">关闭弹窗</tn-button>
	  </view>
	</tn-popup>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import {urlTobase64, baseicons} from '../../util/common.js'
  export default {
    name: 'TemplateCourse',
    mixins: [template_page_mixin],
    data(){
      return {
        banner: [],
		bannerList: [],
        noticelist1: [
        ],
		noticelist2: [
		],
		    dongtaiList: [
		    ],
		xiaoxiList: [],
		imageTitle: '',
		previewImg: '',
		ruyuanjilu: '',
		userInfo: {},
		childName: '',
		moduleList: [
			{
				name: '入园记录',
				icon: 'ryjlicon',
				url: '/pagesB/shouye/ruyuanjilu',
				iconClass: 'tn-bg-orange'
			},
			{
				name: '晨检记录',
				icon: 'cjjlicon',
				url: '/pagesA/qinziyouer/chenjianjilu',
				iconClass: 'tn-bg-indigo'
			},
			{
				name: '服药登记',
				icon: 'fydjicon',
				url: '/pagesA/fuyao/index',
				iconClass: 'tn-bg-bluepurple'
			},
			{
				name: '幼儿食谱',
				icon: 'yrspicon',
				url: '/pagesA/fuyao/baobaoshipu',
				iconClass: 'tn-bg-purplered'
			},
			{
				name: '班级通知',
				icon: 'bjtzicon',
				url: '/pages/my/tongzhi',
				iconClass: 'tn-bg-purplered'
			},
			{
				name: '亲子任务',
				icon: 'qzrwicon',
				url: '/pagesA/qinziyouer/qinzirenwu',
				iconClass: 'tn-bg-orange'
			},
			{
				name: '动态发布',
				icon: 'dtfbicon',
				url: '/pages/banjidongtai/fabu',
				iconClass: 'tn-bg-indigo'
			},
			{
				name: '家长留言',
				icon: 'jzlyicon',
				url: '/pagesB/my/jiazhangliuyan',
				iconClass: 'tn-bg-bluepurple'
			},
			// {
			// 	name: '园长热线',
			// 	icon: 'tn-icon-service',
			// 	url: '/pagesB/shouye/yuanzhangrexian',
			// 	iconClass: 'tn-bg-orange'
			// },
		],
		currentMsg: {},
		showpopup: false,
		isshowPOP: true,
		col: 4,
		dataList:[],
		imglist: [],
      }
    },
	computed: {
          // 兼容小程序
          gridItemWidth() {
            return 100 / this.col + '%'
          }
    },
	onShow() {
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
	},
	mounted(){
		this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
		if(this.userInfo && this.userInfo.childName){
			this.childName = this.userInfo.childName;
		}
		// this.getBanner();
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		this.getXiangce();
		this.getMsgList();
		this.getRuyuanjilu();
		this.$nextTick(() => {
			this.banner.push(baseicons['banner1'])
			this.banner.push(baseicons['banner2'])	
		})
		console.log(baseicons)
	},
    methods: {
      getImgsbase64(icon){
			return baseicons[icon];
	  },
      goMydetailpage(url){
		  if(!url){
			  uni.showToast({
			  	title: '开发中。。。',
			  	duration: 2000
			  });
			return;
		  }
      		  uni.navigateTo({
      		  	url: url
      		  })
      },
	  
	  getRuyuanjilu(){
	  		  this.request({
	  		  	url: '/ChildAttendance/AdmissionRecord',
	  		  	method: 'get',
	  		  }).then(res => {
	  		  	if(res.code == 200 && res.success){
					// if(res.data=='暂无记录'){
						
					// }else{
						
					// }
	  				this.ruyuanjilu = res.data;
	  		  	}
	  		  })
	  },
	  getMsgList(){
		  this.noticelist1 = ['欢迎使用天乐乐淘淘家校互动平台']
	  		  this.request({
	  		  	url: '/sysNotice/page',
	  		  	method: 'get',
	  		  	params: {
	  		  		pageNo: 1,
	  		  		pageSize: 5,
	  		  		isOnlySend: false
	  		  	},
	  		  }).then(res => {
	  		  	if(res.code == 200){
	  				this.xiaoxiList = res.data.rows;
	  				this.xiaoxiList.forEach(item => {
	  					
	  					this.noticelist1.push(item.content)
	  				})
	  		  	}
	  		  })
	  },
	    clickBanner(index){
	  	  console.log(index)
	    },
	  getBanner(){
		  //http://localhost:6003/api/Slideshow/Page?pageNo=1&pageSize=10&ShowRange=1
	  	this.request({
	  		url: '/Slideshow/Page',
	  		method: 'get',
	  		params: {
	  			pageNo: 1,
	  			pageSize: 4
	  		},
	  	}).then(res => {
	  		if(res.code == 200){
				this.bannerList = res.data.rows;
				res.data.rows.forEach(item => {
					let obj = {
						image: this.imageTitle + item.image.filedId,
						title: item.title
					}
					this.banner.push(obj)
				})
	  		}
	  	})
	  },
	  gopages(){
		  
		uni.navigateTo({
			url: '/pagesB/shouye/ruyuanjilu'
		})
	  },
	  goxiangce(){
		  // this._switchTabbarPage(2)
		  this.$emit('goxiangce')
	  },
	  getXiangce(){
		  let params = {
		  	PageNo: 1,
		  	PageSize: 3,
			IsParent: true
		  }
		  this.request({
		  	url: '/ClassAlbum/Page',
		  	method: 'get',
		  	params: params,
		  }).then(res => {
		  		if(res.code == 200){
		  			this.dataList = [];
		  			let rows = res.data.rows;
		  			this.totalPage = res.data.totalPage;
		  			rows.forEach(item => {
						let imgarr = [];
		  				if(item.images && item.images.length){
		  					item.images.forEach((_img, idx) => {
								
		  						_img['src'] = this.imageTitle + _img.filedId;
								_img['image'] = this.imageTitle + _img.filedId;
								_img['title'] = _img.fileName
								if(imgarr.length < 3){
									imgarr.push(_img)
								}
		  					})
		  				}
						item.images = imgarr
		  				if(item.tags){
		  					item.tagsList = item.tags.split(',')
		  				}else{
		  					item.tagsList = []
		  				}
						this.dataList.push(item);
		  			})
		  				console.log(this.dataList)
		  		}
		  	
		  })
	  },
		showImage(item, image_item){
				this.previewImg = image_item.src;
				this.imglist = item.images
		},
		
		noticeClick(index){
			// if(this.xiaoxiList[index]){
				
			// 		  this.currentMsg = this.xiaoxiList[index];
			// 		  this.showpopup = true;
			// 		  this.readMsg(this.currentMsg.id)
			// }
			uni.navigateTo({
				url: '/pages/my/tongzhi'
			})
		},
	  
	  readMsg(msgId){
	  		  this.request({
	  		  	url: '/sysNotice/Read',
	  		  	method: 'get',
	  		  	params: {
	  		  		id: msgId
	  		  	},
	  		  }).then(res => {
	  		  	if(res.code == 200){
	  				this.getMsgList();
	  		  	}
	  		  })
	  },
	
					closedPopup(){
						console.log('关闭弹框-------------')
						this.showpopup = false;
						this.isshowPOP = false;
						this.$nextTick(() => {
							this.isshowPOP = true;
						})
					},
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
    
    &__search {
      flex-basis: 60%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 0 60rpx;
        font-size: 24rpx;
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
        color: #AAAAAA;
      }
    }
  }
  /*logo start */
  .logo-image{
    width: 65rpx;
    height: 65rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
  }
  /* 自定义导航栏内容 end */
  
  /* 内容布局 start*/
  .course-shadow{
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .course-radius{
    border-radius: 15rpx;
  }
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 业务展示 start */
  .tn-info {
    
    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }
    
    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 40rpx 30rpx;
      border-radius: 15rpx;
      
  
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 30%;
          font-size: 50rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          font-size: 30rpx;
          
          &--data {
            margin-top: 5rpx;
            font-weight: bold;
          }
        }
      }
      
      &__right {
        &--icon {
          position: absolute;
          right: 0upx;
          top: 50upx;
          font-size: 100upx;
          width: 108upx;
          height: 108upx;
          text-align: center;
          line-height: 60upx;
          opacity: 0.15;  
        }
      }
    }
  }
  
  .image-music{
    padding: 100rpx 0rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 20rpx 20rpx 0 0;
  }
  /* 文章内容 end*/
  
  /* 底部tabbar start*/
  .footerfixed{
   position: fixed;
   width: 100%;
   bottom: 0;
   z-index: 999;
   background-color: #FFFFFF;
   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .tabbar {
    display: flex;
    align-items: center;
    min-height: 110rpx;
    justify-content: space-between;
  	padding: 0;
  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
  
  .tabbar .action {
  	font-size: 22rpx;
  	position: relative;
  	flex: 1;
  	text-align: center;
  	padding: 0;
  	display: block;
  	height: auto;
  	line-height: 1;
  	margin: 0;
  	overflow: initial;
  }
  
  .tabbar .action .bar-icon {
  	width: 100rpx;
  	position: relative;
  	display: block;
  	height: auto;
  	margin: 0 auto 10rpx;
  	text-align: center;
  	font-size: 42rpx;
  }
  
  .tabbar .action .bar-icon image {
  	width: 50rpx;
  	height: 50rpx;
  	display: inline-block;
  }
  .row-flex{
	  display: flex;
	      flex-direction: row;
  }
  .image-article {
    border-radius: 8rpx;
    border: 1rpx solid #F8F7F8;
    width: 200rpx;
    height: 200rpx;
    position: relative;
  }

  .image-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }

  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  .kecheng-height{
	max-height: 800rpx;  
	overflow-y: auto;
  }
  
  
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(255, 255, 255, 1);
		  .tn-icon-close{
			  position: absolute;
			  top: 10px;
			  right: 10px;
			  font-size: 36rpx;
			  z-index: 888;
		  }
	  }

  .popup-content{
	  position: relative;
	  height: 100%;
  }
  .tongzhi-pop-content{
	  position: absolute;
	  top: 130rpx;
	  left: 50rpx;
	  right: 50rpx;
	  bottom: 120rpx;
	  overflow-y: auto;
  }
  .opo-bottom-btn{
	  position: absolute;
	  bottom: 20rpx;
	  left: 50%;
	  margin-left: -100rpx;
  }
  .xixiaoneirong{
	  display: inline-block;
	  max-height: 70rpx;
	  overflow: hidden;
  }
  .blogger {
    &__item {
      padding: 0;
    }
    
    &__author {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__desc {
      line-height: 55rpx;
      
      &__label {
        padding: 0 20rpx;
        margin: 0rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      &__content {
        
      }
    }
    
    &__content {
      margin-top: 18rpx;
      padding-right: 18rpx;
      
      &__data {
        line-height: 46rpx;
        text-align: justify;
        overflow: hidden;
        transition: all 0.25s ease-in-out;
      }
      
      &__status {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #82B2FF;
      }
    }
    
    &__main-image {
      border-radius: 16rpx;
      
      &--1 {
        max-width: 80%;
        max-height: 300rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 180rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
    
    &__ad {
      width: 100%;
      height: 500rpx;
      transform: translate3d(0px, 0px, 0px) !important;
      
      ::v-deep .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      
      &__item {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: translate3d(100%, 0px, 0px) scale(1) !important;
        transition: transform 0.25s ease-in-out;
        z-index: 1;
        
        &--0 {
          transform: translate3d(0%, 0px, 0px) scale(1) !important;
          z-index: 4;
        }
        &--1 {
          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
          z-index: 3;
        }
        &--2 {
          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
          z-index: 2;
        }
      }
      
      &__content {
        border-radius: 40rpx;
        width: 640rpx;
        height: 500rpx;
        overflow: hidden;
      }
      
      &__image {
        width: 100%;
        height: 100%;
      }
    }
}

	.line-view{
		width: 100%;
		padding-top: 10rpx;
		border-bottom: 2px dotted #aaaaaa;
	}
	.huifu{
		font-size: 24rpx;
		.yzhft{
			font-size: 26rpx;
		}
	}
	.bottom-view{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 100rpx;
			background-color: rgba(245, 245, 245, 1);
	}
	
	.infos-v{
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	
	.tags-v{
		font-size: 26rpx;
		color: #01BEFF;
	}
	.minifont{
		font-size: 26rpx;
	}
	.color-m-v{
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	.delete-view{
		color: #E83A30;
	}
	
	.thswiper{
		width: 100%;
	}
	.btmbgview{
		height: 480rpx;
		background-image: linear-gradient(to right, #67D14F, #93E781);
	}
	.sss-v{
		
	}
	.infovvv{
		color: #189511;
		overflow: hidden;
		padding-top: 50px;
	}
	.bigtext{
		font-size: 38rpx;
		font-weight: 550;
	}
	.tllttimg{
		width: 200rpx;
		height: 50rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}
	.namevvv{
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
		margin-top: 30rpx;
		float: left;
	}
	.itemsview-con{
		width: 92%;
		margin-left: 4%;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-top: -40rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
	}
	.template-course{
		background-color: #f6f6f6;
	}
	.iconii__item--icon{
		width: 55px;
		height: 40px;
		font-size: 26px;
		border-radius: 50%;
		margin-bottom: 0px;
		position: relative;
		z-index: 1;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.iii-item{
		width: 92%;
		margin-left: 4%;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	.iii2-item{
		width: 92%;
		height: 200rpx;
		margin-left: 4%;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.itemcontent{
		
	}
	.gonggaoimg{
		width: 100rpx;
		height: 30rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.gengduo{
		border-left: 1px solid #aaaaaa;
		width: 100rpx;
		font-size: 24rpx;
		color: #000000;
	}
	.rightdouble{
		width: 80rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #000000;
		.tn-icon-right-double{
			margin-top: 10rpx;
		}
	}
	.padding-bottom10{
		padding-bottom: 10rpx;
	}
	.margin-right20{
		margin-right: 20rpx;
	}
	.baojiaotag{
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #9DD757;
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #ffffff;
	}
	.frameview{
		width: 35rpx;
		height: 35rpx;
		img{
			height: 100%;
			width: 100%;
		}
	}
	.avatarview{
		width:85rpx;
		height: 85rpx;
		border-radius: 42rpx; 
		background-color: #eeeeee;
		img{
			height: 100%;
			width: 100%;
		 }
	}
</style>
